<template>
	<m-layout2 title="添加银行卡" gap="24" class="bank-card">
		<m-block gap="30 30 0" :isBg="true">
			<view class="head flex-column ai-center">
				<m-image2 class="mb-24" :size="[140,90]" src="../../../static/images/pages/mine/card.png" mode='' />
				<text class="fs33 fw-600">添加银行卡</text>
				<text class="fs24 mt-12 text-red plr-48">*暂不支持工商银行、农业银行、建设银行、招商银行及信用卡添加</text>
			</view>
			<view class="ul">
				<view class="li">
					<text>证件类型</text>
					<view class="box">
						<picker @change="cardChange" mode=selector range-key="cardName" :range="cardList">
							<text style="width: 100%;"
								v-if="form.certificateType">{{cardList1[form.certificateType]}}</text>
							<text class="error" v-else>请选择</text>
						</picker>
					</view>
					<m-icon size="28" type="icon-youjiantou_huaban"></m-icon>
				</view>
				<view class="li">
					<text>证件号码 </text>
					<input v-model="form.certificateNo" type="text" 
						:placeholder="`请输入${form.certificateType.split('-')[1]||'证件'}号码`">
				</view>
				<view class="li">
					<text>姓名</text>
					<input v-model="form.userName" type="text" placeholder="请输入姓名">
				</view>

				<view class="li">
					<text>银行卡号</text>
					<input v-model="form.cardNo" type="text" placeholder="请输入银行卡号">
				</view>
				<!-- 	<view class="li">
					<text>银行卡类型</text>
					<radio-group @change="chang">
						<label v-for="item in radioGroup" :key="item">
							<radio :value="item" :checked="item==activeRadio" />{{item}}
						</label>
					</radio-group>
				</view> -->
				<!-- <view class="li">
					<text>银行卡有效期</text>
					<input v-model="form.checkExpiry" type="text" placeholder="银行卡有效期">
				</view> -->
				<view class="li">
					<text>手机号</text>
					<input v-model="form.phoneNo" type="text" placeholder="请输入预留电话号码">
				</view>
				<view class="li" style="padding: 24rpx 0rpx;">
					<text>验证码</text>
					<view class="flex flex-1">
						<input v-model="numcode" type="text" placeholder="请输入验证码">
						<text @click="getCodeFn()" v-if="!codeUrl" class="code-box" style="color:red;">获取验证码</text>
						<image @click="getCodeFn()" class="code-box " :src="codeUrl" mode="" v-else></image>
					</view>
				</view>
				<!-- <view class="li">
					<text>设默认</text>
					<switch :checked="form.isDefault" color="#FA2B47" style="transform: scale(0.7);"
						@change="switchChange" />
				</view> -->
			</view>
		</m-block>
		<!-- <m-block  gap="30 30" spa="20 0 0">
			 <view>
				 <view class="flex-between">
				 	<input v-model="form.phoneNo" type="text" placeholder="请输入验证码">
					<view class="">
						<text>获取验证码</text>
					</view>
				 </view>
			 </view>
		 </m-block> -->
		<view class="btn-box" slot="footer">
			<m-button @click="verify" v-if="userinfo.truename">提交</m-button>
			<m-button @click="Jump('/pages/mine/information/information')" v-else>未实名，前往认证</m-button>
		</view>
		<m-dialog :isShow="isShow" title="提示" :showCancel="true" @handleConfirm="addPayCardFn"
			@handleCancel="isShow = false">
			<view class="hint" style="text-align: center;">
				请反复确认提交的信息
			</view>
		</m-dialog>
	</m-layout2>
</template>

<script>
	import { email, mobile } from '@/libs/fn/verify.js' // 引入验证工具库
	import { BindCardApply } from "@/api/Cards.js"
	const BIN = require('bankcardinfo')
	import { baseURL } from '@/common/baseconfig.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				activeRadio: '',
				radioGroup: ['借记', '贷记'],
				isShow: false,
				cardList1: {
					'01': '身份证',
					'02': '护照',
					'03': '港澳来往内地通行证',
					'04': '台湾来往内地通行证',
					'06': '临时身份证',
					'10': '外国人居留证',
					'11': '港澳居民居住证',
					'12': '台湾居民居住证'
				},
				cardList: [{
						id: '01',
						cardName: '身份证'
					},
					{
						id: '02',
						cardName: '护照'
					},
					{
						id: '03',
						cardName: '港澳来往内地通行证'
					},
					{
						id: '04',
						cardName: '台湾来往内地通行证'
					}, {
						id: '06',
						cardName: '临时身份证'
					},
					{
						id: '10',
						cardName: '外国人居留证'
					},
					{
						id: '11',
						cardName: '港澳居民居住证'
					},
					{
						id: '12',
						cardName: '台湾居民居住证'
					}
				],
				form: {
					id: 0,
					cardNo: '', // 卡号
					userName: '', // 姓名
					phoneNo: '', // 预留手机号
					certificateType: '01', // 证件类型
					certificateNo: '', // 证件号码
					creditFlag: 1, // 借贷记标识
					checkNo: '', // cvn2 码
					// checkExpiry: '', // 卡片有效
				},
				numcode: '', // 图形验证码
				codeUrl: ''
			};
		},
		computed: {
			...mapState({
				bankCardList: state => state.user.bankCardList,
				userinfo: state => state.user.userinfo,
				userBackList: state => state.user.userBackList,
				backSelf: state => state.user.backSelf,
				backPublic: state => state.user.backPublic,
			}),
		},
		onLoad({ cardtype }) {

		},
		methods: {
			async getCodeFn() {
				console.log('baseURL', baseURL)
				if (!this.form.phoneNo) return this.Toast('请输入预留手机号')
				if (!mobile(this.form.phoneNo)) return this.Toast('请输入正确的手机号');
				this.codeUrl =
					`${baseURL}/NumberVerifyCode?username=${this.form.phoneNo}&time=${Date.parse(new Date())}`
			},
			chang(e) {
				if (e.detail.value == '借记') this.form.creditFlag = 1
				if (e.detail.value == '贷记') this.form.creditFlag = 2
			},
			// 设置默认
			// switchChange({ detail: { value } }) {
			// 	console.log(value)
			// 	this.form.isDefault = value;
			// },
			// 证件选择
			cardChange({ detail: { value } }) {
				console.log('value===>', value)
				console.log('this.cardList[value]===>', this.cardList[value])
				this.form.certificateType = `${this.cardList[value].id}`
			},
			async verifyName() {
				if (!this.form.cardNo) {
					return this.Toast('请填写银行卡号')
				}
				BIN.getBankBin(this.form.cardNo, async (err, data) => {
					if (err) return this.Toast('未查询到该银行卡所属银行')
					console.log(data)
				})
			},
			// 添加支付银行卡
			async addPayCardFn() {
				// await this.verifyName()
				const { success, msg } = await BindCardApply({
					numcode: this.numcode,
				}, this.form)
				this.Toast(msg)
				if (success) {
					setTimeout(() => {
						this.Jump();
					}, 500)
				}
			},
			verify() {
				if (!this.form.certificateType) return this.Toast('请选择证件类型')
				if (!this.form.certificateNo) return this.Toast('请输入证件号码')
				if (!this.form.userName) return this.Toast('请输入姓名')
				if (!this.form.phoneNo) return this.Toast('请输入预留手机号')
				if (!mobile(this.form.phoneNo)) return this.Toast('请输入正确的手机号');
				if (!this.form.cardNo) return this.Toast('请输入银行卡号')
				if (!this.numcode) return this.Toast('请输入验证码')
				// if (!this.form.creditFlag) return this.Toast('请选择借贷记标识')
				// if (!this.form.checkExpiry) return this.Toast('请输入卡片有效')
				this.isShow = true;
			},
		},

	}
</script>

<style lang="scss">
	.bank-card {
		.head {
			padding-top: 20rpx;
			background: #fff;
			text-align: center;

		}

		.ul {
			background: #fff;
			padding: 50rpx 0 0;

			.li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx 0rpx;

				text {
					display: block;
					width: 180rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.box {
					flex: 1;

					.error {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #908080;
					}
				}

				input {
					flex: 1;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}
			}

			.li+.li {
				border-top: 1rpx solid #EEEEEE;
			}
		}


	}

	.btn-box {
		padding: 30rpx 24rpx;
		box-sizing: border-box;

	}

	.picker-box {
		padding: 60rpx 0;
		background: #fff;
	}

	.code-box {
		text-align: center;
		line-height: 64rpx;
		width: 180rpx;
		height: 72rpx;
		cursor: pointer;
	}
</style>